<script setup lang="ts">
/**
 * 引入拖拽相关的存储管理器。
 */
import { dragStore } from "./drag";

/**
 * 使用 withDefaults 预设组件 props 的默认值。
 * @param {Object} props 组件的属性定义。
 * @param {string} props.data 拖拽项的数据。
 * @param {string} [props.groupName] 拖拽组的名称，默认为 'DrapDrop'。
 */
const props = withDefaults(
  defineProps<{
    data: DragItem;
    /** 拖拽分组标识 */
    groupName?: string;
  }>(),
  {
    groupName: "DrapDrop",
  }
);

/**
 * 当拖拽开始时，存储拖拽项的信息。
 * @param {Event} e 拖拽事件。
 * 存储拖拽项的初始状态到全局存储中，以便在拖拽过程中可以访问和更新。
 */
const onDragstart = (e) =>
  dragStore.set(props.groupName, {
    ...props.data,
    id: 0,
    x: 0,
    y: 0,
  });

/**
 * 当拖拽结束时，移除存储的拖拽项信息。
 * 清除全局存储中与当前拖拽组相关的拖拽项信息，因为拖拽操作已经结束。
 */
const onDragend = () => dragStore.remove(props.groupName);
</script>
<template>
  <div class="drag-item">
    <div
      class="drag-item__el"
      draggable="true"
      @dragstart="onDragstart"
      @dragend="onDragend"
    >
      <slot></slot>
    </div>
    <div class="drag-item__title">
      {{ data.title }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
/**
 * 定义拖拽项的样式。
 */
.drag-item {
  width: 100px;
  height: 88px;
  display: flex;
  flex-direction: column;
  
/**
 * 定义拖拽项item盒子的样式。
 */
  &__el {
    width: 100px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid #dddddd;
    background-color: yellow;
  }

  &__title {
    text-align: center;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #555555;
    line-height: 14px;
    margin-top: 14px;
  }
}
</style>
